<script setup>
import { getMemberCart } from '@/api/cart'
import { onMounted, ref, watch } from 'vue'
import { showImagePreview } from 'vant';
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
const router = useRouter()
const userStore = useCounterStore()

//购物车数组
let list = ref([])
list.value = userStore.list


//点击减少商品数量
function decBtn(data) {
    if (data.orderNum === 1) return
    data.orderNum--
}
//点击增加商品数量
function btnAdd(data) {
    data.orderNum++
}

//点击删除商品
function delBtn(id) {
    list.value = list.value.filter(item => {
        return item.id !== id
    })
    // console.log(list);
    return list
}

//点击图片预览
function imgBtn(img) {
    showImagePreview([img]);
}

//点击购买
function buyBtn(id){
    router.push({
        path: '/order',
        query: { id }
    })
}

//删除

</script>

<template>
    <div class="box">
        <header class="header">购物车</header>
        <div class="content">
            <van-card v-for="item in list" :key="item.id" :num="item.orderNum" :price="item.price" :desc="item.desc"
            :title="item.name" :thumb="item.picture" @click-thumb="imgBtn(item.picture)" >
            <!-- @click="goOrder(item.id)" -->
                <template #tags>
                    <van-tag plain type="primary">火爆</van-tag>
                    <van-tag plain type="primary">折扣</van-tag>
                </template>

                <template #footer>
                    <van-button size="mini" @click="decBtn(item)">减少</van-button>
                    <van-button size="mini" @click="btnAdd(item)">增加</van-button>
                    <van-button class="deletebtn" type="danger" @click="delBtn(item.id)">删除</van-button>
                    <van-button class="buybtn" type="success" @click="buyBtn(item.id)">购买</van-button>
                </template>
            </van-card>

            <!-- <van-swipe-cell v-for="item in list" :key="item.id">
                <van-card :num="item.orderNum" :price="item.price" :desc="item.desc" :title="item.name"
                    :thumb="item.picture" />
                <van-icon class="btnDec" name="minus" size="20" @click="decBtn(item)" />
                <van-icon class="btnAdd" name="plus" size="20" @click="btnAdd(item)" />
                <van-button class="deletebtn" type="danger" @click="delBtn(item)">删除</van-button>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell> -->
        </div>

    </div>
</template>

<style lang="scss" scoped>
.goods-card {
    margin: 0;
    // background-color: black;
}

.van-swipe-cell {
    margin: 0.05rem 0;
    position: relative;


    .btnDec {
        position: absolute;
        bottom: 0.01rem;
        z-index: 999;
        right: 0.8rem;
    }

    .btnAdd {
        position: absolute;
        bottom: 0.01rem;
        z-index: 999;
        right: 0.4rem;
    }
}

.deletebtn {
    width: 0.4rem;
    height: 0.2rem;
    padding: 0;
    position: absolute;
    top: 0.5rem;
    z-index: 999;
    right: 0.1rem;
}
.buybtn{
    width: 0.4rem;
    height: 0.2rem;
    padding: 0;
    position: absolute;
    top: 0.5rem;
    z-index: 999;
    right: 0.55rem; 
}

.delete-button {
    height: 1.03rem;
}
</style>